<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<view class="box price-box">
			<view class="line">支付金额</view>
			<view class="price line">¥{{price}}</view>
			<view class="bottom acea-row row-between-wrapper">
				<view class="">{{service_name}}</view>
				<view class="">¥{{service_price}}</view>
			</view>
		</view>
		<view class="way-line">支付方式</view>
		<view class="box way-box">
			<label class="radio acea-row row-between-wrapper">
				<view class="acea-row row-middle"><text class="iconfont icon-weixinzhifu"></text>微信支付 </view>
				<radio value="" checked="true" color="#6ECA87" style="transform: scale(.7);" />
			</label>
		</view>
		<view class="coupon-line acea-row row-between-wrapper" @click="show = true">
			<u-icon name="red-packet-fill" color="#fa3534" size="42rpx" label="优惠券" space='10rpx' labelSize="24rpx"
				labelColor="#000000"></u-icon>
			<view class="acea-row row-middle">
				<text :class="coupon?'coupon':''">{{coupon?'-'+coupon.coupon_price:'请选择'}}</text> <text
					class="iconfont icon-icon_xiangyou"></text>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="pay">确认支付</view>
		</view>
		<u-popup :show="show" @close="show = false">
			<view class="coupon-list">
				<view class=" acea-row row-between-wrapper" v-for="(item,index) in couponList" :key='index'
					v-if="couponList.length > 0">
					<view class="coupon-item acea-row">
						<view class="num-box">
							<view class="num"> ￥<text>{{item.coupon_price}}</text> </view>
							<view class="">满{{item.threshold_price}}元可用 </view>
						</view>
						<view class="cont-box">
							<view class="title">{{item.name}}</view>
							<view class="tips">{{item.tips}}</view>
							<view class="time">{{item.start_time}} ~ {{item.end_time}}</view>
						</view>
					</view>
					<view class="" @click="checkedTap(index)">
						<radio :checked="active == index" />
					</view>
				</view>
				<u-empty mode="coupon" icon="http://cdn.uviewui.com/uview/empty/coupon.png"
					v-if="couponList.length == 0">
				</u-empty>
				<view class="btn-box" @click="sure">
					<view class="btn">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '就诊人管理',
					'color': true,
					'class': 'on'
				},
				details: '',
				show: false,
				couponList: [],
				active: null, // 选中的序号
				coupon: '',
				order_id: '',
				service_price: '',
				price_yuan: '',
				price: '',
				service_name: '',
			};
		},
		onLoad(option) {
			this.service_price = option.price;
			this.price = option.price;
			this.order_id = option.order_id;
			this.service_name = option.service_name;
			this.couponLists();

		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		},
		onShareTimeline(res) { //分享到朋友圈

		},
		methods: {
			async couponLists() {
				const res = await this.$myRequest({
					url: '/api/user/couponLists',
					data: {
						openid: uni.getStorageSync('openid'),
						page: '',
						limit: '',
						status: 1,
					}
				})
				this.couponList = res.data.data;
			},
			pay() {
				var coupon = this.coupon;
				if (coupon) {
					this.payOrder(coupon.id)
				} else {
					this.payOrder()
				}
			},
			async payOrder(id) {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/order/payOrder',
					data: {
						openid: uni.getStorageSync('openid'),
						order_id: this.order_id,
						coupon_id: id,
					}
				})
				console.log('支付', res.data.data)
				if (res.data.status == 201) {
					that.$refs.uToast.show({
						type: 'success',
						message: res.data.msg,
						complete() {
							uni.switchTab({
								url: '/pages/order/list'
							})
						}
					})
				} else if (res.data.status == 200) {
					var orderInfo = res.data.data;
					uni.requestPayment({
						"provider": "wxpay", //固定值为"wxpay"
						"timeStamp": orderInfo.timeStamp,
						"nonceStr": orderInfo.nonceStr,
						"package": orderInfo.package,
						"signType": orderInfo.signType,
						"paySign": orderInfo.paySign,
						success: function(res) {
							that.$refs.uToast.show({
								type: 'success',
								message: '支付成功',
								complete() {
									uni.switchTab({
										url: '/pages/order/list'
									})
								}
							})
						},
						fail: function(err) {
							that.$refs.uToast.show({
								type: 'error',
								message: '支付失败',
								complete() {
									uni.switchTab({
										url: '/pages/order/list'
									})
								}
							})
						}
					});
				}

			},
			// radioChange(e) {
			// 	this.index = e.detail.value
			// },
			checkedTap(index) {
				if (this.active == index) { // 如果已经选中，则取消选中
					this.active = null;
				} else { // 否则进行选中赋值
					this.active = index;
				}
			},
			sure() {
				if (this.couponList.length > 0 && this.active !== null) {
					this.coupon = this.couponList[this.active]
					var price = this.service_price - this.coupon.coupon_price;
					this.price = price.toFixed(2);
				} else {
					this.price = this.service_price
				}
				this.show = false;

			}
		}
	}
</script>

<style lang="scss" scoped>
	.wap {
		padding: 30rpx;
	}

	.box {
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 30rpx;

	}

	.price-box {
		padding-top: 100rpx;
	}

	.line {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.price {
		font-size: 64rpx;
		font-weight: 700;
		margin-bottom: 60rpx;
	}

	.price-box .bottom {
		line-height: 80rpx;
		border-top: 1px dashed #E4E4E4;
		font-size: 28rpx;
		color: #666;
	}

	.way-line {
		font-size: 28rpx;
		line-height: 60rpx;
		text-align: left;
	}

	.way-box {
		line-height: 80rpx;
		font-size: 22rpx;
		color: #333;
	}

	.way-box .iconfont {
		font-size: 42rpx;
		color: #6ECA87;
		margin-right: 10rpx;

	}

	.coupon-line {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		font-size: 24rpx;
	}

	.coupon {
		color: #fa3534;
		font-size: 28rpx;
	}

	.coupon-list {
		width: 100%;
		padding: 30rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.coupon-item {
		width: 86%;
		box-shadow: 7.217px 8.302px 24.94px 4.06px rgba(68, 133, 218, 0.08);
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}

	.num-box {
		width: 200rpx;
		height: 160rpx;
		border-radius: 20rpx;
		color: #fff;
		background: linear-gradient(90deg, #347DFE, #86B0FA);
		text-align: center;
		font-size: 24rpx;
		padding-top: 30rpx;
	}

	.num-box .num {
		padding-bottom: 20rpx;
		line-height: 1;
	}

	.num-box .num text {
		font-size: 48rpx;
	}

	.cont-box {
		padding-left: 20rpx;
		flex: 1;
		font-size: 22rpx;
		color: #bababa;
		position: relative;
	}

	.cont-box .title {
		font-size: 32rpx;
		color: #000;
		font-weight: 700;
		padding-bottom: 30rpx;
	}



	.cont-box .tips {
		padding-bottom: 20rpx;
	}

	.btn-box {
		padding-top: 30rpx;
	}

	.btn-box .btn {
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #347DFE;
		color: #fff;
		font-size: 32rpx;
	}

	.coupon-list .btn-box .btn {
		width: 60%;
		margin: 0 auto;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
	}
</style>
